<template>
	<view class="container">
		<view class="top">
			<view class="title">当前奖池<text>(10.1~10.31)</text></view>
			<view class="jiangchi"><text>{{pool}}</text>泡泡币</view>
		</view>
		<view class="center">
			<view class="w1"></view>
			<view class="w2"></view>
			<view class="box">
				<view class="box-top" @click="go">
					<view class="icon"></view>
					<view class="content">
						<uni-notice-bar color="black" speed="30" scrollable="true" background-color="#fff" single :text="rules"></uni-notice-bar>
					</view>
					<view class="desc">查看规则</view>
				</view>
				<view class="head">
					<view class="r1">排名</view>
					<view class="r2">用户</view>
					<view class="r3">A赏</view>
					<view class="r4">B赏</view>
					<view class="r5">得分</view>
				</view>
				<view class="rank">
					<view :class="key>2?'item':key==0?'item item1':key==1?'item item2':'item item3'" v-for="(item,key) in list" :key="key">
						<view class="r1" v-if="key>2">{{key+1}}</view>
						<view class="r1" v-if="key==0"><view class="i1"></view></view>
						<view class="r1" v-if="key==1"><view class="i2"></view></view>
						<view class="r1" v-if="key==2"><view class="i3"></view></view>
						<view class="r2">
							<image :src="item.headimg" mode="aspectFill"></image>
							<view class="name">{{item.name}}</view>
						</view>
						<view class="r3">{{item.a}}</view>
						<view class="r4">{{item.b}}</view>
						<view class="r5">{{item.score}}</view>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 隔断 -->
		<view class="h"></view>
		<view class="bottom">
			<view class="left">
				<image :src="user.headimg" mode="aspectFill"></image>
			</view>
			<view class="center-1">
				<view class="name">{{user.name}}</view>
				<view class="desc" v-if="user.is_rank">距离上一名还差{{user.distance}}分</view>
				<view class="desc" v-else>距离前十还差{{user.distance}}分</view>
			</view>
			<view class="score">{{user.me_score}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	
	export default {
		data() {
			return {
				pool:0,
				user:{},
				list:[],
				rules:''
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		watch: {
		},
		onLoad() {
			this.getIp();
		},
		methods: {
			go() {
				uni.navigateTo({
					url: '/pages/page/index?uuid=64f8114139dab',
				});
			},
			getIp(){
				//http://cl-api.cxycoder.com/yifanshang/ranking
				this.$http('/yifanshang/ranking', 'GET', {
					
				}).then(res => {
					this.list = res.data.list;
					this.pool = res.data.pool;
					this.user = res.data.user;
					this.rules = res.data.rules;
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.top{
		width: 750rpx;
		height: 520rpx;
		position: relative;
		.title{
			position: absolute;
			bottom: 130rpx;
			left: 35rpx;
			font-size: 42rpx;
			color: white;
			font-family: youshe;
			text{
				font-size: 32rpx;
			}
		}
		.jiangchi{
			background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/jiangchi.png);
			background-size: 100% 100%;
			position: absolute;
			bottom: -10rpx;
			left: 0rpx;
			width: 450rpx;
			height: 150rpx;
			display: flex;
			justify-content: center;
			line-height: 150rpx;
			font-size: 32rpx;
			font-family: alimama;
			text{
				font-size: 50rpx;
				font-family: youshe;
			}
		}
	}
	.center{
		width: 690rpx;
		box-sizing: border-box;
		background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/swper_bg.png);
		background-size: 100% 100%;
		// height: 1000rpx;
		margin: 0 auto;
		position: relative;
		
		.box{
			position: absolute;
			width: 690rpx;
			// height: 935rpx;
			margin: 33px auto;
			border: 5px solid #F1EB59;
			background-color: white;
			border-radius: 40rpx;
			z-index: 1;
			.head{
				display: flex;
				width: 650rpx;
				margin: 0px auto;
				margin-top: 15rpx;
				.r1,.r2,.r3,.r4,.r5{
					text-align: center;
					font-weight: bold;
				}
				
				.r1{
					width: 80rpx;
				}
				.r2{
					width: 250rpx;
				}
				.r3{
					width: 100rpx;
				}
				.r4{
					width: 100rpx;
				}
				.r5{
					width: 100rpx;
				}
			}
			.rank{
				margin-top: 10rpx;
				.item{
					display: flex;
					width: 650rpx;
					margin: 0px auto;
					margin-top: 5rpx;
					height: 100rpx;
					.r1,.r2,.r3,.r4,.r5{
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.r1,.r3,.r4,.r5{
						font-family: youshe;
					}
					.r1{
						width: 80rpx;
					}
					.r2{
						width: 250rpx;
						display: flex;
						box-sizing: border-box;
						image{
							width: 60rpx;
							height: 60rpx;
							border-radius: 10rpx;
							margin-right: 10rpx;
						}
						.name{
							width: 150rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
					.r3{
						width: 100rpx;
					}
					.r4{
						width: 100rpx;
					}
					.r5{
						width: 100rpx;
					}
					.i1{
						background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/rank-1.png);
						background-size: 100% 100%;
						width: 45rpx;
						height: 60rpx;
					}
					.i2{
						background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/rank-2.png);
						background-size: 100% 100%;
						width: 45rpx;
						height: 60rpx;
					}
					.i3{
						background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/rank-3.png);
						background-size: 100% 100%;
						width: 45rpx;
						height: 60rpx;
					}
				}
			}
			
			.item1{
				background: linear-gradient(to right,rgba(241, 235, 89, 0.2),#FFFFFF);
			}
			.item2{
				background: linear-gradient(to right,rgba(68, 158, 254, 0.2),#FFFFFF);
			}
			.item3{
				background: linear-gradient(to right,rgba(235, 133, 34, 0.2),#FFFFFF);
			}
			.box-top{
				display: flex;
				border: 2px solid #F1EB59;
				border-radius: 100rpx;
				width: 650rpx;
				margin: 0px auto;
				margin-top: 20rpx;
				padding: 15rpx;
				box-sizing: border-box;
				.icon{
					width: 60rpx;
					height: 60rpx;
					background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/icon.png);
					background-size: 100% 100%;
				}
				.content{
					width: 400rpx;
					height: 70rpx;
					margin-top: -10rpx;
				}
				.desc{
					font-size: 30rpx;
					font-family: youshe;
					background-color: #F1EB59;
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 30rpx;
				}
			}
		}
		.w1{
			background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/w1.png);
			background-size: 100% 100%;
			width: 150rpx;
			height: 265rpx;
			position: absolute;
			right: 140rpx;
			top: -185rpx;
			z-index: 0;
		}
		.w2{
			background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/act_rank/w2.png);
			background-size: 100% 100%;
			width: 150rpx;
			height: 230rpx;
			position: absolute;
			right: -36rpx;
			top: -130rpx;
			z-index: 2;
		}
	}
	.h{
		height: 1450rpx;
	}
	.bottom{
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		height: 150rpx;
		background-color: #FCFBDE;
		z-index: 3;
		width: 750rpx;
		.left{
			width: 160rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				border: 1px solid #F1EB59;
			}
		}
		.center-1{
			width: 320rpx;
			.name{
				font-weight: bold;
			}
			.desc{
				margin-top: 5rpx;
				font-size: 26rpx;
				color: #999999;
			}
		}
		.score{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 60rpx;
			font-family: youshe;
			font-weight: bold;
			width: 240rpx;
		}
	}
</style>
